; (function () {
    const template = `<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

    <!--右边上半区域-->
    <!--<h1 class="page-header">Dashboard</h1>-->
        <!--定义插槽--> 
        <slot name="dashboard"></slot>
        <!--组件引用 统一用小写 -->
        <!--通过属性绑定方式向子组件传递数据 -->
        <!--通过 v-on 绑定 @自定义事件名=事件监听函数 父组件中定义事件监听函数 
        在子组件 dashboard 中触发 delete_hobby 事件来调用 deleteHobby 函数-->
        <dashboar :hobbies="hobbies" @delete_hobby="deleteHobby"></dashboar>
    <!--右边下半区域-->
    <h2 class="sub-header">Section title</h2>
        <home-list :empList="empList" :deleteEmp="deleteEmp"></home-list>
  </div>`

    window.AppHome = {
        template,//等价于template:template

        data() {
            return {
                hobbies: ['看书', '台球', '睡觉', '撸代码'],
                empList: [],
            }
        },
        components: {
            Dashboar,
            'home-list': HomeList
        },
        methods: {
            // 删除指定下标的数据 
            // 因为删除 emp 会对 empList 做更新操作， 
            // 而 empList 是初始化在当前这个组件里，所以删除的函数要定义在这个组件中
            deleteEmp(index) {
                this.empList.splice(index, 1)
            },
            //删除爱好
            deleteHobby(index) {
                this.hobbies.splice(index, 1)
                // 删除成功，发布消息，导航统计数据
                PubSub.publish('changeNum', 1)
            }
        },
        created() {
            axios.get('http://127.0.0.1:5500/vue-08-router/02-bootstrap-ajax-router/emp.json')
                .then(response => {//function (response) {
                    console.log(response.data, this);
                    this.empList = response.data
                })
                .catch(error => {//function (error) {
                    alert(error.message);
                })
                .finally(() => {//function () {
                    console.log('finally');
                });
        },
    }
})()